<template>
  <div class="variation">
    <n-flex
      vertical
      class="variation-bill"
    >
      <div
        v-for="item in billList"
        :key="item.id"
        :class="[
          'variation-bill__item',
          { 'variation-bill__item--select': item.id === queryParmas.billId }
        ]"
        @click="handleSelectBill(item.id)"
      >
        {{ item.name }}
      </div>
    </n-flex>
    <n-flex
      vertical
      class="flex1"
    >
      <top-title
        title="支出/收入"
        btn-text="支出/收入"
        @add="handleShow"
      />
      <n-flex class="box">
        <n-data-table
          :columns="columns"
          :data="list"
        />
        <custom-pagination
          v-model:total="total"
          v-model:page-num="queryParmas.pageNum"
          v-model:page-size="queryParmas.pageSize"
        />
      </n-flex>
      <custom-form
        v-model:visible="visible"
        v-model:form="form"
        v-model:config-list="configList"
        title="支出/收入"
        :height="600"
        @confirm="handleConfirm"
        @cancel="handleCancel"
      />
    </n-flex>
  </div>
</template>

<script lang="ts" setup>
  import { h } from 'vue'
  import type { DataTableColumns } from 'naive-ui'
  import { NProgress } from 'naive-ui'
  import SvgIcon from '~~/components/SvgIcon/index.vue'

  const columns = ref<DataTableColumns<any>>([
    {
      title: '图标',
      key: 'icon',
      width: 80,
      render(row) {
        return h(
          'div',
          {
            style: {
              background: row.type === 0 ? '#18a058' : '#e5b951',
              width: '26px',
              height: '26px',
              textAlign: 'center',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              borderRadius: '9999px'
            }
          },
          h(
            SvgIcon,
            {
              name: row.icon,
              style: { fontSize: '16px' }
            },
            {}
          )
        )
      }
    },
    {
      title: '名称',
      key: 'name'
    },

    {
      title: '支出/收入',
      key: 'price',
      align: 'right',
      render(row) {
        return h(
          'span',
          {
            style: {
              fontWeight: 'bold'
            }
          },
          {
            default: () => `${row.type ? '+' : '-'}${row.price}元`
          }
        )
      }
    },
    {
      title: '支付方式',
      key: 'payCardName',
      align: 'center'
    },
    {
      title: '资产占比',
      key: 'surplus',
      align: 'center',
      width: 200,
      render(row) {
        return h(
          NProgress,
          {
            type: 'line',
            percentage: row.surplus,
            indicatorPlacement: 'outside',
            status: 'success',
            processing: true,
            style: 'font-size: 12px;'
          },
          {
            default: () => `${row.surplus}%`
          }
        )
      }
    },
    {
      title: '本月剩余额度',
      key: 'Monthsurplus',
      align: 'center'
    },
    {
      title: '时间',
      key: 'createTime',
      align: 'center'
    },
    {
      title: '操作',
      key: 'operate',
      align: 'center',
      width: 200
    }
  ])

  // 显示/隐藏
  const visible = ref(false)
  // 表单
  const form = ref({
    type: 0,
    typeId: ''
  })

  const expendList = ref<Card[]>([]) // 支出列表
  const incomeList = ref<Card[]>([]) // 收入列表
  // 表单配置
  const configList = ref<FormRenderConfig[]>([
    {
      label: '名称',
      key: 'name',
      type: 'input',
      span: 24
    },
    {
      label: '价格',
      key: 'price',
      type: 'number',
      span: 24
    },
    {
      label: '时间',
      key: 'type',
      type: 'radio',
      span: 24,
      options: [
        { label: '支出', value: 0 },
        { label: '收入', value: 1 }
      ]
    },
    {
      label: '支付类型',
      key: 'typeId',
      type: 'select',
      span: 24,
      options: []
    },
    {
      label: '支付方式',
      key: 'cardId',
      type: 'radio',
      span: 24,
      options: []
    }
  ])

  // 确认
  async function handleConfirm() {
    try {
      await $dialog('是否确认提交？')
      http.post('/bill/variation', { ...form.value, billId: queryParmas.billId }).then(() => {
        $message.success('操作成功')
        visible.value = false
        handleQuery()
      })
    } catch (e) {}
  }

  // 账单列表
  const billList = ref<Bill[]>([])

  // 获取账单列表
  function getBillList() {
    http.get<Bill[]>('/bill/variation/bill').then(res => {
      billList.value = res.data
      if (res.data.length) {
        queryParmas.billId = res.data[0].id
        handleQuery()
      }
    })
  }
  // 选择账单
  function handleSelectBill(billId: number) {
    queryParmas.billId = billId
    handleQuery()
  }

  // 获取支付卡包列表
  function getPayCardList() {
    http.get('/bill/variation/card').then(res => {
      const options = res.data.map((item: Card) => ({ label: item.name, value: item.id }))
      setOptions(configList.value, 'cardId', options)
    })
  }

  // 获取支付方式列表
  function getPayTypeList() {
    http.get('/bill/variation/type').then(res => {
      const { expend, income } = res.data
      expendList.value = expend.map((item: Card) => ({ label: item.name, value: item.id }))
      incomeList.value = income.map((item: Card) => ({ label: item.name, value: item.id }))
      setOptions(configList.value, 'typeId', expendList.value)
    })
  }

  // 显示
  async function handleShow() {
    await getPayCardList()
    await getPayTypeList()
    visible.value = true
  }

  // 取消
  function handleCancel() {
    visible.value = false
    form.value = {
      type: 0,
      typeId: ''
    }
  }

  const { list, handleQuery, queryParmas, total } = useList({
    reqUrl: '/bill/variation',
    startQuery: false
  })

  const { $message, $dialog } = useFastNaive()
  getBillList()
  watch(
    () => form.value.type,
    val => {
      setOptions(configList.value, 'typeId', val === 0 ? expendList.value : incomeList.value)
      form.value.typeId = ''
    }
  )
</script>

<style scoped lang="scss">
  .variation {
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    height: calc(100vh - 60px);
    &-bill {
      height: 100%;
      width: 260px;
      margin-right: $space-lg;
      @extend .box;
      &__item {
        padding: 10px 16px;
        font-size: 12px;
        cursor: pointer;
        margin-bottom: $space-sm;
        &:hover {
          color: #18a058;
          background: rgba(24, 160, 88, 0.1);
        }
        &--select {
          color: #18a058;
          background: rgba(24, 160, 88, 0.1);
        }
      }
    }
  }
</style>
